import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb, Carousel, Row, Col, Icon, List, Typography } from 'antd';
import Slider from "react-slick";
// import Ellipsis from 'ant-design-pro/lib/Ellipsis';
// import 'ant-design-pro/dist/ant-design-pro.css';
import SliderItem from '@/components/SliderItem'
import styles from './index.less';
import {imgDomainName } from '@/constants/index'

class ReactSlider extends Component {
  state = {
  };

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  onChange = (a, b, c) => {
    console.log(a, b, c);
  }

  next = () => {
    this.slider.slickNext();
  }
  previous = () => {
    this.slider.slickPrev();
  }

  render() {

    const { settings, data} = this.props;

    return (
      <div>
        <Row>
          <Col span={1}>
            <Icon
              className={styles.leftArrow}
              type="left-circle"
              onClick={this.previous}
              style={{display: data.length>5 ? 'block' : 'none'}}
            />
          </Col>
          <Col span={22}>
            <Row gutter={16}>
              {data.map((item, index) => (
                <Col span={6}>
                  <SliderItem
                    imgSrc={imgDomainName + item.coverUrl}
                    // content={localStorage.getItem('umi_locale') == 'zh-CN'?item.introduce:item.introduceEN}
                    content={item.introduce}
                    listDataSource={item.informationList}
                    key={index}
                    id={item.id}
                  />
                </Col>
              ))}
              {/*<Slider*/}
                {/*{ ...settings }*/}
                {/*className={styles.slider}*/}
                {/*ref={c => (this.slider = c)}*/}
              {/*>*/}
                {/*{data.map((item, index) => (*/}
                  {/*<Col span={6}>*/}
                    {/*<SliderItem*/}
                      {/*imgSrc={imgDomainName + item.coverUrl}*/}
                      {/*// content={localStorage.getItem('umi_locale') == 'zh-CN'?item.introduce:item.introduceEN}*/}
                      {/*content={item.introduce}*/}
                      {/*listDataSource={item.informationList}*/}
                      {/*key={index}*/}
                      {/*id={item.id}*/}
                    {/*/>*/}
                  {/*</Col>*/}
                {/*))}*/}
              {/*</Slider>*/}
            </Row>
          </Col>
          <Col span={1}>
            <Icon
              className={styles.rightArrow}
              // style={{float: 'left', left: '20px', lineHeight: '143px', cursor: 'pointer'}}
              type="right-circle"
              onClick={this.next}
              style={{display: data.length>5 ? 'block' : 'none'}}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default ReactSlider;
